<style lang="scss" scoped>
@import "@/assets/css/variable";

.home {
  width: 100%;
  background-color: $main-bgc-white;
  min-height: 100%;
  font-size: 1.2rem;
  box-sizing: border-box;
  position: relative;
  flex: 1;
  overflow: hidden;
  $radiusSize: 100%;
  .top_bg {
    width: 140%;
    height: 18rem;
    border-bottom-left-radius: $radiusSize;
    border-bottom-right-radius: $radiusSize;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: $mainColor;
    z-index: 1;
  }
  .box1 {
    display: flex;
    z-index: 2;
    align-items: center;
    .select_xiaoqu {
        flex: 0 0 11rem;
        z-index: 20;
        font-size: 1.4rem;
        margin-right: 1.6rem;
        color: #fff;
        display: flex;
        align-items: center;
        /* text-align: right; */
        justify-content: flex-end;
      .icon {
        margin-left: 0.5rem;
      }
    }
  }
  .list {
    // padding-bottom: 1rem;
    .item {
      // margin-top: 0.4rem;
      // margin-left: 1rem;
      // margin-right: 1rem;
      padding: 0.8rem 1.6rem;
      background-color: white;
      margin-top: 1rem;
      .flex2 {
        display: flex;

        .flex2-left {
          flex: 0 0 90px;
          height: 70px;
          border-radius: 0.6rem;
          overflow: hidden;
          position: relative;
          .tag {
            background-color: #fe280b;
            padding: 0.3rem 0.7rem;
            border-bottom-left-radius: 0.8rem;
            color: white;
            position: absolute;
            right: 0;
            top: 0;
            border: 0.1rem solid white;
            .text {
              font-size: 10px;
              transform: scale(0.8); //缩放0.8倍
              color: white;
            }
          }
        }

        .flex2-right {
          margin-left: 0.8rem;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .title {
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* 设置行数 */
            -webkit-box-orient: vertical;
            color: $color0;
            font-size: 1.6rem;
            line-height: 1.2em;
            overflow: hidden;
          }

          .desc {
            span {
              color: $color2;

              &.split {
                font-size: 1rem;
              }
            }
          }
          .instudy {
            color: $color2;
          }
          .badgeBox {
            padding-bottom: 0.4rem;
            margin-top: 0.6rem;
            .xiajiele {
              color: $color2;
            }
            .badge {
              padding: 0.1rem 0.8rem;
              font-size: 1.2rem;
              transform: scale(0.8);
              background-color: #e4eaff;
              color: #4970fd;
              border: 0.1rem solid #4970fd;
              border-radius: 0.3rem;
              box-sizing: border-box;
              overflow: hidden;
            }
            .badge3 {
              padding: 0.1rem 0.8rem;
              font-size: 1.2rem;
              transform: scale(0.8);
              background-color: #e4eaff;
              color: #4970fd;
              border: 0.1rem solid #4970fd;
              border-radius: 0.3rem;
              box-sizing: border-box;
              overflow: hidden;
            }
            .badge1 {
              padding: 0.1rem 0.8rem;
              font-size: 1.2rem;
              transform: scale(0.8);
              background-color: #ffecdc;
              color: #ff7e16;
              border: 0.1rem solid #ff7e16;
              border-radius: 0.3rem;
              box-sizing: border-box;
              overflow: hidden;
            }
            .badge2 {
              padding: 0.2rem 1rem;
              font-size: 1.2rem;
              background-color: #e8e9e9;
              color: #999;
              border: 0.1rem solid #999;
              border-radius: 0.3rem;
              box-sizing: border-box;
              overflow: hidden;
            }
          }
        }
      }
    }
  }

  .swipeBox {
    // position: absolute;
    margin: 0 1.6rem;
    min-height: 152px;
    max-height: 152px;
    // left: 1.6rem;
    // right: 1.6rem;
    // height: 16rem;
    border-radius: 0.8rem;
    box-sizing: border-box;
    z-index: 3;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .schoolContainer {
    width: 100%;
    height: 4rem;
    display: flex;
    align-items: center;
    padding: 2rem 1rem 0rem 2rem ;
    .pic {
      width: 10%;
      height: 4rem;
      margin-right: 1rem;
      box-sizing: border-box;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .other {
      width: 75%;
      height: 4rem;
      box-sizing: border-box;
      text-align: left;
      background: #F6F6F6;
      border-radius: 5px;
      display: flex;
      box-sizing: border-box;
      justify-content: space-between;
      .desc {
        color: #858585 !important;
        margin-left: 1rem;
        width: 80%;
        height: 4rem;
		line-height: 4rem;
        overflow: hidden;
        text-overflow: ellipsis; //超出部分以省略号显示
        white-space: nowrap;
      }
      .back {
        width: 20%;
        height: 4rem;
        line-height: 4rem;
        text-align: center;
        color: #4970FD;
      }
    }
  }
}
</style>
<template>
  <div class="home">
    <div class="top_bg"></div>
    <div class="box1">
      <search-box></search-box>
      <div class="select_xiaoqu" @click="toSelectView">
        <span>{{ selectedCampus.name || "选择校区" }}</span>
        <van-icon name="arrow-down" class="icon" size="18" />
      </div>
    </div>
    <van-swipe :autoplay="2000" class="swipeBox">
      <van-swipe-item v-for="(item, index) in carousel" :key="index">
        <img v-lazy="item.picture" />
      </van-swipe-item>
    </van-swipe>
    <!-- <van-swipe :autoplay="2000" class="swipeBox">
		  <van-swipe-item v-for="(item, index) in images" :key="index">
		    <img v-lazy="item" />
		  </van-swipe-item>
		</van-swipe> -->
    <div class="schoolContainer" v-if="selectedCampus&&selectedCampus.brief">
      <div class="pic">
        <img src="@/assets/img/schoolLogo.svg" alt="">
      </div>
      <div class="other">
        <div class="desc">
          {{selectedCampus.brief}}
        </div>
        <div class="back" @click="showSchool">查看</div>
      </div>
    </div>
    <div v-if="coursePageList && coursePageList.length > 0">
      <div
        class="titleMoreBox margT-m margB-ll"
        @click="toView('/course/myCourse')"
      >
        <span class="title">我的课程</span>
        <span class="more"
          ><span>更多</span>
          <van-icon name="arrow" class="icon" color="#BFC0C2" size="1.6rem" />
        </span>
      </div>
      <div class="list" v-if="coursePageList && coursePageList.length > 0">
        <div
          class="item"
          v-for="item in coursePageList"
          :key="item.id"
          @click="
            toView(
              `/course/detail4xx?id=${item.course_id}&type=${item.type}&fromView=1`
            )
          "
        >
          <div class="flex2">
            <div class="flex2-left">
              <van-image
                width="90"
                height="70"
                fit="cover"
                :src="item.images"
              />
              <div class="tag" v-if="item.type == 2">
                <span class="text">线下课</span>
              </div>
            </div>
            <div class="flex2-right">
              <div class="title">{{ item.coursename }}</div>
              <div class="desc">
                <span>{{ item.classes }}</span>
              </div>
              <div class="badgeBox">
                <span class="xiajiele"
                  >下节课:{{ $utils.parseToDateYMD(item.start_time) }}</span
                >
                <!-- <span class="badge1 margL-l">{{(item.startName)}}</span> -->
                <!-- <span class="margL-l" :class="$utils.getStatusBadge(item.status)">{{$utils.filterCourseStatus(item.status)}}</span> -->
                <span
                  class="margL-l"
                  :class="$utils.getStatusBadge(item.start)"
                  >{{ $utils.filterCourseStatus(item.start) }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <van-empty description="暂无数据" />
      </div>
      <div class="splitLine"></div>
    </div>
    <div v-if="recommendList && recommendList.length > 0">
      <div class="titleMoreBox margB-ll" @click="toCourseView">
        <span class="title">推荐课程</span>
        <span class="more"
          ><span>更多</span>
          <van-icon name="arrow" class="icon" color="#BFC0C2" size="1.6rem" />
        </span>
      </div>
      <div class="list" v-if="recommendList && recommendList.length > 0">
        <div
          class="item"
          v-for="item in recommendList"
          :key="item.id"
          @click="toDetailView(item)"
        >
          <div class="flex2">
            <div class="flex2-left">
              <van-image
                width="90"
                height="70"
                fit="cover"
                :src="item.images"
              />
              <div class="tag" v-if="item.type == 2">
                <span class="text">线下课</span>
              </div>
            </div>
            <div class="flex2-right">
              <div class="title">{{ item.name }}</div>
              <div class="desc">
                <span>共{{ item.course_duration }}课时</span>
                <span class="split margL-l">|</span>
                <span class="margL-l">{{ item.visit }}次浏览</span>
              </div>
              <div class="badgeBox">
                <!-- <span class="badge">{{item.sortname}}</span> -->
                <span
                  v-if="item.type == 2"
                  :class="$utils.getStatusBadge(item.start)"
                  >{{ $utils.filterCourseStatus(item.start) }}</span
                >
                <span v-else class="badge">{{ item.sortname }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <van-empty description="暂无数据" />
      </div>
      <div class="splitLine"></div>
    </div>
    <div>
      <div class="titleMoreBox margB-l" @click="toView('/home/zixun')">
        <span class="title">资讯</span>
        <span class="more"
          ><span>更多</span>
          <van-icon name="arrow" class="icon" color="#BFC0C2" size="1.6rem" />
        </span>
      </div>
      <zixun-list
        v-if="articleList.length > 0"
        :list="articleList"
      ></zixun-list>
      <div v-else>
        <van-empty description="暂无数据" />
      </div>
    </div>
    <div v-if="articleList && articleList.length > 0">
      <div class="tabbar-height"></div>
      <div class="tabbar-height"></div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import SearchBox from "@/components/SearchBox.vue";
import ZixunList from "@/components/zixunList.vue";
import { myMixins } from "@/assets/js/mixins.js";
// import {
// 	mixinsOpenId
// } from "@/src/assets/js/mixinsOpenId.js"
export default {
  name: "home",
  mixins: [myMixins],
  components: {
    SearchBox,
    ZixunList,
  },
  data() {
    return {
      // 学校简介
      desc: {},
      activeLabel: 0,
      active: 0,
      loadingRefresh: false,
      mainColor: "#FF0000",
      tabList: [
        {
          id: 0,
          name: "全部",
        },
        {
          id: 1,
          name: "线下课程",
        },
        {
          id: 2,
          name: "在线学习",
        },
      ],
      list: [],
      courseData: "",
      loading: false,
      finished: false,
      pageNo: 1,
      pageSize: 10,
      images: [
        "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5ec59f1e-d7e4-40a5-91d6-605747ef2fcc/695877c7-a2a8-43ee-82fe-413021212dfb.jpg",
        "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5ec59f1e-d7e4-40a5-91d6-605747ef2fcc/695877c7-a2a8-43ee-82fe-413021212dfb.jpg",
      ],
      carousel: [],
      zixunList: [],
      selectedCampus: "",
      recommendList: "",
      coursePageList: "",
      articleList: [],
    };
  },
  created() {
    const _this = this;
    document.title = "一起学";
    //判断缓存中是否存在openid
    this.openid = localStorage.getItem("openid") || this.$store.state.openid;
    console.log("this.openid",this.openid)
    if (this.openid) {
      // this.MemberH5Items(this.openid);
      this.CarouselH5Pages();
      this.CourseH5Recommend();
      this.LearningMyCourse();
      this.ArticleH5Artpage();
      
    }else{
      if(process.env.NODE_ENV === 'production'){
        console.log("getWeixinConfig")
        this.getWeixinConfig()
      }
    }
    // this.getCode()
  },
  mounted() {
    this.getInfoFromStorage()
  },
  methods: {
    getInfoFromStorage() {
      // 获取缓存中的校区信息
      const selectedCampus = JSON.parse(localStorage.getItem("selectedCampus"));
      if (selectedCampus && selectedCampus.id) {
      } else {
        this.$router.push("/selectCampus");
      }
      this.selectedCampus = selectedCampus;
      // 获取校区介绍
      // this.desc = JSON.parse(localStorage.getItem('selectedCampus'))
      this.$store.commit('setSchoolMsg', this.selectedCampus)
    },
    showSchool() {
      this.$router.push('/home/schoolMes')
    },
    getWeixinConfig() {
      const _this = this;
      let params = {};
      _this.$request.getWeixinConfig(params).then((res) => {
        _this.$store.commit("setAppid", res.data.value.appid);
        _this.$store.commit("setSecret", res.data.value.secret);
        console.log("getcode")
        _this.getcode(res.data.value.appid);
      });
    },
    getcode(appid) {
      // 非静默授权，第一次有弹框
      const _this = this;
      const code = this.getUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openid
      localStorage.setItem('code',code)
      const local = window.location.href;
      if (code == null || code === "") {
        window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
          appid +
          "&redirect_uri=" +
          encodeURIComponent(local) +
          "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
      } else {
        _this.$store.commit("setcode", code);
        console.log("getOpenId")
        _this.getopenid(code); //把code传给后台获取用户信息
      }
    },
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    getopenid(code) {
      const _this = this;
      let params = {
        appid: _this.$store.state.appid,
        secret: _this.$store.state.secret,
        code: code,
      };
      _this.$request.getOpenid(params).then((res) => {
        console.log("getOpenid_res:",res)
        const userinfo = res.data[0];
        const openid = userinfo["openid"];
        // alert("openid:"+openid)
        localStorage.setItem("openid", openid);
        _this.userInfo = userinfo
        console.log("_this.userInfo",_this.userInfo)
        localStorage.setItem("userInfo", JSON.stringify(userinfo));
        if(openid){
          // _this.MemberH5Items(openid);
          _this.CarouselH5Pages();
          _this.CourseH5Recommend();
          _this.LearningMyCourse();
          _this.ArticleH5Artpage();
          // 获取缓存中的校区信息
          const selectedCampus = JSON.parse(localStorage.getItem("selectedCampus"));
          if (selectedCampus && selectedCampus.id) {
          } else {
            this.$router.push("/selectCampus");
          }
          this.selectedCampus = selectedCampus;
          // 获取校区介绍
          // this.desc = JSON.parse(localStorage.getItem('selectedCampus'))
          this.$store.commit('setSchoolMsg', this.selectedCampus)
        }
        // _this.getfansitem(item)
      });
    },
    toSelectView() {
      console.log("click");
      this.$router.push("/selectCampus?from=home");
    },
    toCourseView() {
      console.log("toCourseView");
      this.$emit("toCourse", 1);
      window.location.href = location.href.split("#")[0] + "#/course";
      location.reload();
      // this.$router.replace('/course')
    },
    ArticleH5Artpage() {
      const _this = this;
      const campus_id = _this.selectedCampus.id;
      let params = {
        // openid: _this.$store.state.openid || localStorage.getItem('openid'),
        campus_id: campus_id,
        pageNo: 1,
        pageSize: 4,
      };
      _this.$request.ArticleH5Artpage(params).then((res) => {
        _this.articleList = res.data.data;
        // this.carousel = res.data.data
        // this.$store.commit('setCaseList', this.caseList);
      });
    },
    LearningMyCourse() {
      const _this = this;
      let params = {
        type_id: 2,
        openid: localStorage.getItem("openid") || this.$store.state.openid,
        campus_id: JSON.parse(localStorage.getItem("selectedCampus")).id,
        pageNo: 1,
        pageSize: 4,
      };
      _this.$request
        .LearningMyCourse(params)
        .then((res) => {
          let data = res.data.data;
          _this.coursePageList = data;
          // _this.list.push(...data)
          // console.log(_this.list.length)
          // if (_this.pageNo >= (Math.ceil(res.data.totalCount / _this.pageSize))) {
          // 	_this.finished = true;
          // } else {
          // 	_this.pageNo++
          // }
          // this.$store.commit('setCaseList', this.caseList);
        })
        .finally(() => {
          console.log("finally");
        });
    },
    CourseH5Pagelist() {
      const _this = this;
      const campus_id = _this.selectedCampus.id;
      let params = {
        type: 2,
        openid: _this.$store.state.openid || localStorage.getItem("openid"),
        campus_id: campus_id,
        pageNo: 1,
        pageSize: 3,
      };
      _this.$request.CourseH5Pagelist(params).then((res) => {
        _this.coursePageList = res.data.data;
        // this.carousel = res.data.data
        // this.$store.commit('setCaseList', this.caseList);
      });
    },
    CourseH5Recommend() {
      const _this = this;
      const campus_id = _this.selectedCampus.id;
      let params = {
        campus_id: campus_id,
      };
      _this.$request.CourseH5Recommend(params).then((res) => {
        _this.recommendList = res.data;
        // this.carousel = res.data.data
        // this.$store.commit('setCaseList', this.caseList);
      });
    },
    CarouselH5Pages() {
      const _this = this;
      const campus_id = _this.selectedCampus.id;
      let params = {
        campus_id: campus_id,
        pageNo: _this.pageNo,
        pageSize: _this.pageSize,
      };
      _this.$request.CarouselH5Pages(params).then((res) => {
        this.carousel = res.data.data;
        // this.$store.commit('setCaseList', this.caseList);
      });
    },

    getActivityPage() {
      const _this = this;
      let params = {
        status: 2,
        pageNo: _this.pageNo,
        pageSize: _this.pageSize,
      };
      _this.$request
        .getActivityPage(params)
        .then((res) => {
          let data = res.data.data;
          _this.list.push(...data);
          console.log(_this.list.length);
          if (_this.pageNo >= Math.ceil(res.data.totalCount / _this.pageSize)) {
            _this.finished = true;
          } else {
            _this.pageNo++;
          }
          // this.$store.commit('setCaseList', this.caseList);
        })
        .finally(() => {
          console.log("finally");
        });
    },
  },
};
</script>
